<template>
	<view class="wanl-goods">
		<!-- 商品主图轮播 -->
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill"/>
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
		</view>
		
		<view class="bg-white padding-lr padding-tb-sm">
			<view class="head flex justify-between align-center">
				<view class="text-price wanl-orange text-xxl margin-right-xs text-bold" style="color: #E31F1F;">{{ goodsData.price || '0.00' }}</view>
				<!-- <text class="icon-kefu1 iconfont" style="color: #888888;font-size: 40rpx;"></text> -->
				<view class="action">
					<text style="font-size: 40rpx;" class="wlIcon-yiguanzhu1 text-red" v-if="iscollect == 1" @tap="follow"></text>
					<text style="font-size: 40rpx;" class="wlIcon-gerenguanzhu" v-if="iscollect == 2" @tap="follow"></text>
				</view>
			</view>
			<!-- 标题，分享 -->
			<view class="title flex flex-direction">
				<view class="text-cut-2">
					{{ goodsData.title || '加载中...' }}
				</view>
				<text class="sub_title">
					{{goodsData.sub_title}}
				</text>
			</view>
		</view>
		
		<view class="bg-white margin-top-sm padding-lr evaluate">
			<view class="head flex justify-between align-center">
				<text>客户评价</text>
				<view class="more" @tap="$wanlshop.to(`/pages/medicalcare/homemaking/comment?id=${goodsId}&t=2`)">
					<text>更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="wanl-gray text-sm text-center padding-bottom padding-top-lg" v-if="goodsData.evaluate_list.length == 0">暂无评论</view>
			<block v-for="(data,index) in goodsData.evaluate_list" :key="index">
				<view class="l" :key="index" v-if="index < 3">
					<view class="info flex justify-start align-center">
						<image :src="$wanlshop.oss(data.user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill"></image>
						<text>{{data.user.nickname}}</text>
						<text>{{data.createtime_text}}</text>
						<uni-rate :max="5" :value="data.score" :size="12" color="#CCCCCC" active-color="#4CBD66"/>
					</view>
					<view class="text text-cut-2"> {{data.content}} </view>
					<view class="img">
						<image @tap="$wanlshop.previewImage(data.images_text,k)" :src="$wanlshop.oss(item)" v-for="(item,k) in data.images_text" :key="k" mode="aspectFill"></image>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 分隔符 -->
		<wanl-divider class="bg-white margin-top-sm" bgcolor="#fff" width="60%">服务详情</wanl-divider>
		<!-- 产品详情 -->
		<view class="wanl-goods-content margin-bottom-sm bg-white padding-lr-sm" id="details"><rich-text :nodes="goodsData.content"></rich-text></view>
		
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view style="z-index: 99999;" class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''"
				@tap="modalName = null">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-directs @change="modalName = null" /></view>
			</view>
			<!-- 规格 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="option wanl-modal">
						<view class="head text-left padding-bj solid-bottom">
							<view
								class="cu-avatar radius-bock margin-right"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }"
							></view>
							
							<view class="flex-sub">
								<view class="text-price wanl-orange text-xl margin-bottom-xs">{{ goodsData.price }}</view>
								<view class="wanl-gray margin-bottom-xs">
									已售 <text class="margin-lr-xs">{{ goodsData.sales }}</text> 件
								</view>
								<view class="text-sm">
									<view >
										<text class="margin-right-bj">已选择</text>
										<text class="margin-right-xs">{{ goodsData.title }}</text>
									</view>
								</view>
							</view>
							
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						<!-- 1.0.8升级 -->
						<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
							<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu" :key="value.id">
								<view class="text-df">{{ value.name }}</view>
								<view class="tag">
									<view
										class="cu-tag text-sm"
										v-for="(item, index) in value.item"
										:key="index"
										:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
										@tap="skuClick(item, spukey, $event, index)"
									>
										{{ $base64.decode(item.name) }}
									</view>
								</view>
							</view>
							<view class="number padding-bj">
								<view class="text-df">购买数量</view>
								<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount" @change="changeNum"></uni-number-box>
							</view>
						</scroll-view>
						<view class="foot padding-lr-bj">
							<button v-if="isChoice" style="background-color: #FF8532;" class="cu-btn bg-gradual-orange round text-bold complete" @tap="ProcessingData">完成</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="safeAreaBottom"></view>
		<view class="wanlian cu-bar tabbar shop solid-top foot">
			<view class="action" @tap="$wanlshop.backHome()">
				<view class="wlIcon-31shouye">
					<!-- <view class="cu-tag badge" v-if="cart.cartnum > 0">{{ cart.cartnum }}</view> -->
				</view>
				首页
			</view>
			<view class="action" @tap="$wanlshop.to('/pages/user/service')">
				<view class="wlIcon-kefu"><view class="cu-tag badge"></view></view>
				客服
			</view>
			<view class="btn-group">
				<button @tap="$wanlshop.to('/pages/user/record/medicalvisit/order')" style="background-color: #FF8532;" class="cu-btn text-white round-left flex-sub">我的订单</button>
				<button style="background-color: #F14646;" class="cu-btn text-white round-right flex-sub" @tap="SubmitData('placeOrder')">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	onNavigationBarButtonTap(e) {
		this.modalName = 'menu'
	},
	data() {
		return {
			TabCur: 0,
			wanlsys: {},
			modalName: null, // 弹出层
			headerOpacity: 0, //不透明度
			currentSwiper: 0, // 轮播图右下角数字
			//产品数据
			goodsData: {
				images:[],
				evaluate_list: []
			},
			goodsId: '',
			subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
			selectshop: {}, //存放最后选中的商品
			selectNum: 1, //选中数量
			isChoice: '', // 是否从选择进入
			scrollAnimation: 100, //分享滚动
			iscollect: 2
		};
	},
	onLoad(option) {
		this.wanlsys = this.$wanlshop.wanlsys();
		this.goodsId = option.id
		this.loadData(option);
		if (this.$store.state.user.isLogin) {
			this.ifcollect(option);
		}
	},
	computed: {
		canCount() {
			return this.subIndex.some(item => item === -1);
		},
		...mapState(['cart', 'common'])
	},
	methods: {
		async ifcollect(option) {
			await uni.request({
				url: '/addons/medicalvisit/api.collect/iscollect',
				method: 'POST',
				data: {
					type: 2,
					goods_id: option.id
				},
				success: res => {
					this.iscollect = res.data;
				}
			})
		},
		async loadData(option) {
			//加载商品
			await uni.request({
				url: `${this.$config.vehicleurl}/addons/medicalvisit/api.Product/detail`,
				data: {
					product_id: option.id
				},
				success: res => {
					//详情正则
					res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
						return img;
					});
					
					this.goodsData = res.data;
				}
			});
		},
		// 关注 & 取消
		async follow() {
			await uni.request({
				url: '/addons/medicalvisit/api.collect/add',
				method: 'POST',
				data: {
					type:2,
					goods_id: this.goodsId
				},
				success: res => {
					this.iscollect = this.iscollect == 1 ? 2 : 1;
					this.$wanlshop.msg(`${this.iscollect == 1 ? '收藏成功' : '取消收藏成功'}`)
				}
			});
		},
		//商品规格修改数量
		changeNum(val) {
			if(this.goodsData.sale){
				let num = parseInt(val);
				if(num > this.goodsData.sale){
					this.$wanlshop.msg(`数量不能超过库存 ${this.goodsData.sale} 件`);
					this.selectNum = parseInt(this.goodsData.sale);
				}else{
					this.selectNum = parseInt(val);
				}
			}
		},
		//轮播图指示器
		swiperChange(e) {
			this.currentSwiper = e.detail.current;
		},
		// 弹出层
		showModal(name) {
			this.isChoice = '';
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 0;
				}, 300);
			}
			this.modalName = name;
		},
		// 关闭弹出层
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		},
		//禁止父元素滑动
		moveHandle() {},
		// 提交数据
		SubmitData(name, type) {
			if(type == 1){
				this.isChoice = name;
				this.ProcessingData();
			}else{
				this.modalName = 'option';
				this.isChoice = name;
			}
		},
		ProcessingData() {
			if (this.isChoice == 'placeOrder') {
				// 提交订单
				if (this.$store.state.user.isLogin) {
					this.$wanlshop.to(`/pages/user/order/addRecord?type=medicalvisit&id=${this.goodsId}&num=${this.selectNum}&address_id=0`);
				}else{
					this.$wanlshop.to('/pages/user/auth/name');
				}
				
			} else {
				this.$wanlshop.msg('数据异常');
			}
			this.hideModal();
		}
	}
};
</script>

<style lang="less">
toast,
uni-toast {
	z-index: 9999;
}
.cu-custom .cu-bar .search-form {
	background-color: #fff;
}

.cu-custom .cu-bar {
	background-color: #f3f3f3;
}

.cu-custom .bar-bg {
	background-color: rgba(243, 243, 243, 0.96);
}
.cu-custom .cu-bar {
	z-index: 99;
}
/* #ifdef MP */
.cu-custom .cu-bar .search-form {
	margin: 0 0 0 25rpx;
}
/* #endif */

.cu-custom .cu-bar .nav .cu-item{
	line-height: 70rpx;
	height: 70rpx;
}
.swiper-box {
	position: relative;
	width: 100%;
	height: 546rpx;
}

.swiper-box swiper {
	width: 100%;
	height: 546rpx;
}

.swiper-box swiper swiper-item image {
	width: 100%;
	height: 546rpx;
}

.swiper-box .indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25upx;
	height: 40upx;
	border-radius: 40upx;
	font-size: 22upx;
	position: absolute;
	bottom: 20upx;
	right: 20upx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}
.action {
	color: #777777;
}
.title {
	padding-bottom: 20rpx;
	view {
		display: inline-block;
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #555555;
		line-height: 48rpx;
		margin-top: 26rpx;
	}
	.sub_title {
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #888888;
		line-height: 40rpx;
	}
}
.content {
	padding: 34rpx 30rpx 30rpx 30rpx;
	.titles {
		width: 690rpx;
		height: 58rpx;
		background: #4CBD66;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 58rpx;
		padding: 0 22rpx;
	}
	.text {
		padding: 20rpx 22rpx;
		width: 690rpx;
		height: 226rpx;
		background: #E9F4EB;
		border-radius: 0 0 20rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #526456;
		line-height: 40rpx;
	}
}
.wanlian {
	background-color: #fff !important;
	// box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0,0,0,0.3);
}
.safeAreaBottom,.wanlian {
	height: calc(128rpx + env(safe-area-inset-bottom)) !important;
}

.evaluate {
	.head {
		padding-top: 16rpx;
		> text {
			display: inline-block;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
		}
		.more {
			text {
				&:nth-child(1) {
					width: 48rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #AAAAAA;
					line-height: 28rpx;
				}
				&:nth-child(2) {
					color: #C8C8C8;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}
	.l {
		margin-top: 24rpx;
		padding-bottom: 20rpx;
		.info {
			image {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50rpx;
			}
			text {
				display: inline-block;
				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #444444;
					line-height: 40rpx;
					margin-left: 18rpx;
				}
				&:nth-child(3) {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #888888;
					line-height: 34rpx;
					margin-left: 16rpx;
					margin-right: 46rpx;
				}
			}
		}
		.text {
			margin-top: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #888888;
			line-height: 28rpx;
			padding-left: 64rpx;
		}
		.img {
			margin-top: 10rpx;
			padding-left: 64rpx;
			image {
				margin-left: 10rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
}
</style>
